<template>
  <div class="i-search">
    <!-- 主要内容首部的输入框和两个按钮 -->
    <el-form ref="form" :model="model" :inline="true">
      <slot></slot>
      <el-form-item>
        <el-button @click="search" type="primary">搜索</el-button>
        <el-button @click="reset" type="primary"
    >重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "i-search",
  props: {
    // 通过变量model接收父组件输入框输入数据forData,forData的数据有其每一个input的v-mdodel赋值
    model: {
      type: Object,
      default: () => {
        return {
          fullscreenLoading: false
        };
      }
    }
  },
  data() {
    return {
      formData: {}
    };
  },
  methods: {
    search() {
      this.$emit("search");
    },
    // 把重置按钮事件传给父组件
    reset() {
      this.$emit("reset");

      this.$refs.form.resetFields();
    }
  },
  components: {}
};
</script>

<style lang="scss" scoped>
.i-search {
  padding: 10px;
  .el-form {
    /deep/ .el-form-item {
      margin-bottom: 0;
      .el-form-item__label {
        width: 80px;
        text-align: right;
      }
    }
  }
}
.el-button {
  padding: 0 15px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 0;
}
</style>
